<template>
  <div class="home-wrap">
    <div class="header-two-wrap">
      <div class="header-two-center">
        <HeaderTwo />
      </div>
    </div>
    <div class="overview-wrap" :style="{ height: editHeight }">
      <div class="overview">
        <div class="left">
          <List :articleList='list'/>
        </div>
        <div class="right">右侧</div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入组件
import HeaderTwo from './components/header-two'
import List from './components/list'

// 导入请求
import { getList } from '../../api/total/home'

export default {
  components: {
    HeaderTwo,
    List
  },
  data: () => {
    return {
      editHeight: 'calc(100% - 42px)', // 二级导航高度42px
      list: []
    }
  },
  methods: {
    getLL () {
      console.log(this.list)
    }
  },
  created () {
    getList().then((res) => {
      this.list = res.data.data[0].acticle
      console.log(this.list)
    })
  },
  computed: {}
}
</script>

<style lang="less" scoped>
.home-wrap {
  height: 100%;
  width: 100%;
  .header-two-wrap {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    box-shadow: 1px -1px 1px rgb(18, 181, 221);
    .header-two-center {
      width: 1000px;
      margin: 0 auto;
      height: 100%;
    }
  }
  .overview-wrap {
    width: 100%;
    overflow-y: scroll;
    .overview {
      width: 1000px;
      border: 1px solid rgba(59, 120, 128, 0.5);
      box-shadow: -1px -1px 6px rgba(59, 120, 128, 0.5);
      margin: 0 auto;
      margin-top: 8px;
      border-radius: 3px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      @media screen and (max-width: 1000px) {
        width: 100%;
      }
      .left {
        flex: 1 1 auto;
      }
      .right {
        width: 200px;
        border: 1px solid red;
        flex: 0 0 auto;
        @media screen and (max-width: 750px) {
          display: none;
        }
      }
    }
  }
}
</style>
